<template>
	<view class="box" v-if="JSON.stringify(detailItem) !== '{}'">
		<!--兼职信息概括 -->
		<view class="parttime-info">
			<!-- 岗位 -->
			<view class="title">{{ detailItem.title + detailItem.shop }}</view>
			<!-- 工资 -->
			<view class="salary">
				12.5元
				<text>/小时</text>
			</view>
			<!-- 公司福利 -->
			<view class="welfare">
				<view class="welfare-item">五险一金</view>
				<view class="welfare-item">年底双薪</view>
				<view class="welfare-item">周末双休</view>
			</view>
			<view class="retime">更新时间：&nbsp;2023-12-12</view>
			<!-- 收藏 -->
			<view class="favi" @click="clickFavi">
				<uni-icons custom-prefix="iconfont" :type="faviState ? faviList[1] : faviList[0]" size="32"></uni-icons>
			</view>
		</view>
		<!-- 招聘人 -->
		<view class="parttime-man">
			<view class="pic">
				<image src="/static/page1.jpg" mode="widthFix"></image>
			</view>
			<view class="rg man-info">
				<!-- <view class="man-info"> -->
				<view class="man-info-name">肯德基</view>
				<view class="man-info-work">美国跨国炸鸡连锁餐厅</view>
				<!-- </view> -->
				<!-- <view class="nowtime">20分钟前在线</view> -->
			</view>
		</view>

		<!-- 信息详情 -->
		<view class="parttime-detail">
			<view class="detail-item">
				<view class="hd">要求</view>

				<!-- 要求 -->
				<view class="require bd">
					<view class="require-item">
						<view class="lf">
							<uni-icons custom-prefix="iconfont" type="icon-dibiao" size="24"></uni-icons>
						</view>
						<view class="rg">
							<text>万达广场（清远站）</text>
						</view>
					</view>
					<view class="require-item">
						<view class="lf">
							<uni-icons custom-prefix="iconfont" type="icon-rili" size="24"></uni-icons>
						</view>
						<view class="rg">
							<text>工作日期（不限）</text>
						</view>
					</view>
					<view class="require-item">
						<view class="lf">
							<uni-icons custom-prefix="iconfont" type="icon-lishijilu_huaban" size="24"></uni-icons>
						</view>
						<view class="rg">
							<text>工作时段（不限）</text>
						</view>
					</view>
				</view>
			</view>
			<view class="detail-req detail-item">
				<view class="hd">详情</view>
				<view class="bd">
					<ul>
						<li>短期兼职、长期兼职、学生兼职、社会兼职</li>
						<li>只要满足以下条件，即可申请：</li>
						<li>1.年龄18-50岁</li>
						<li>工作内容（选其中一个岗位）：</li>
						<li>1.服务区岗：负责点餐，配餐，烹炸小食，接待顾客及岗位清洁。</li>
						<li>2.总配岗：负责汉堡，米饭，卷的产品制作及清洁工作站。</li>
						<li>3.厨房岗：负责半成品的烹炸与烤制，清洁厨房工作站的卫生。</li>
						<li>工作时间：</li>
						<li>上班时间，灵活安排，可早可晚，也可周末、寒暑假等</li>
						<li>薪资待遇：</li>
						<li>1.时薪+特殊时段津贴＋加班津贴＋工时津贴等</li>
						<li>2.法定节假日供班享3倍工资，综合薪酬具体面谈</li>
						<li>福利：</li>
						<li>1.员工折扣餐、带薪培训、年度体检、雇主险</li>
						<li>2.在职学历提升学费补贴-大专/本科</li>
						<li>晋升空间：</li>
						<li>兼职服务员-兼职训练员-兼职组长-餐厅管理层（最快1个月晋升一次且加薪）</li>
					</ul>
				</view>
			</view>
		</view>

		<!-- 底部按钮 -->
		<view class="bottom">
			<view class="lf">
				<uni-icons custom-prefix="iconfont" type="icon-xinxi" size="26"></uni-icons>
				<text>聊一聊</text>
			</view>
			<view class="rg">
				<button @click="apply">申请职位</button>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations, mapGetters } from 'vuex';

export default {
	data() {
		return {
			// 收藏图标的两种状态
			faviList: ['icon-shoucang1', 'icon-shoucang'],
			// 该详情的列表内容
			detailItem: {},
			// 投递列表
			deliverParttime: JSON.parse(uni.getStorageSync('deliverParttime') || '[]')
		};
	},
	onLoad(options) {
		// 解密url的参数对象
		if (options.item) {
			this.detailItem = JSON.parse(decodeURIComponent(options.item));
		} else {
			// 没有详情数据，返回列表页面
			uni.$showMsg('没有详情数据', 1500);
			setTimeout(() => {
				uni.reLaunch({
					url: '/subpkg/parttime/parttime'
				});
			}, 1500);
		}
	},
	methods: {
		...mapMutations('m_collect', ['setParttimeList', 'delParttimeList']),

		// 点击收藏，本地存储数据
		clickFavi() {
			if (this.token) {
				// 取反收藏状态，并更新vuex的parttimeList和本地存储
				this.detailItem.collectState = !this.faviState;

				if (this.detailItem.collectState) {
					uni.$showMsg('收藏成功', 1000);
					// 收藏
					this.setParttimeList(this.detailItem);
				} else {
					uni.$showMsg('已取消收藏！', 1000);
					// 取消收藏---删除此数据
					this.delParttimeList(this.detailItem);
				}
			} else {
				// 无token下，需要登录才能收藏
				uni.$showMsg('请登录！', 1500);
				setTimeout(() => {
					uni.reLaunch({
						url: '/pages/my/my'
					});
				}, 1500);
			}
		},
		// 申请职位---投递
		apply() {
			// 如果已申请过，则提示用户，且不进行再次申请
			var index = this.deliverParttime.findIndex((list) => list.id === this.detailItem.id);
			// 无重复才添加
			if (index < 0) {
				this.deliverParttime.unshift(this.detailItem);
				uni.setStorageSync('deliverParttime', JSON.stringify(this.deliverParttime));
				uni.$showMsg('成功申请职位，\n可到\t我的-我的投递\t中查看', 2500);
			} else {
				uni.$showMsg('请勿重复申请职位，\n可到\t我的-我的投递\t中查看', 2500);
			}
		}
	},
	computed: {
		...mapState('m_collect', ['parttimeList']),
		...mapState(['token']),

		// vuex中若无该项，则为未收藏，faviState直接为false---收藏图标不点亮
		faviState() {
			if (this.token) {
				var pi = this.parttimeList.findIndex((list) => list.id === this.detailItem.id);
				// vuex若有该项，则为已收藏
				return pi < 0 ? false : true;
			} else {
				// 无token下，图标全部不点亮
				return false;
			}
		}
	}
};
</script>

<style lang="scss" scoped>
/* 收藏图标 */
::v-deep .icon-shoucang,
::v-deep .icon-shoucang1 {
	color: #00dcb6 !important;
}
.box {
	box-sizing: border-box;
	margin: 40rpx;
}
/* 招聘信息 */
.parttime-info {
	position: relative;
	border-radius: 24rpx;
	box-shadow: 0px 0px 14rpx 10rpx #ccc;
	padding: 40rpx;

	.title {
		font-size: 40rpx;
		font-weight: 700;
	}
	.welfare {
		display: flex;
		margin: 30rpx 0 40rpx;
		.welfare-item {
			background-color: #efefef;
			border: 2rpx solid #85888e;
			padding: 10rpx 6rpx;
			color: #6c6c6c;
			font-size: 24rpx;
			margin-right: 20rpx;
			border-radius: 6rpx;
		}
	}
	.salary {
		color: #e60909;
		font-size: 36rpx;
		margin: 30rpx 0;
		text {
			font-size: 30rpx;
		}
	}
	.retime {
		border-top: 2rpx solid #bbbbbb;
		padding-top: 50rpx;
		font-size: 28rpx;
	}
	.favi {
		position: absolute;
		right: 66rpx;
		top: 44rpx;
		cursor: pointer;
	}
}
/* 招聘人 */
.parttime-man {
	position: relative;
	border: 2rpx solid #efefef;
	border-radius: 10rpx;
	padding: 32rpx 24rpx;
	display: flex;
	margin: 80rpx 0;

	.pic {
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;
		overflow: hidden;
	}
	.rg {
		display: flex;
		flex-direction: column;
		margin-left: 30rpx;
		justify-content: space-around;
		.man-info-name {
			font-size: 40rpx;
		}
		.man-info-work {
			font-size: 28rpx;
			color: #4f4f4f;
		}
		/* .nowtime {
		 	font-size: 28rpx;
		 	color: #9a9a9a;
		 } */
	}
}
/* 共同部分*/
.parttime-detail {
	padding-bottom: 120rpx;
	.detail-item {
		margin-bottom: 42rpx;
		.hd {
			font-size: 40rpx;
			font-weight: 700;
			display: flex;
			align-items: center;
			&::before {
				content: '';
				display: block;
				width: 12rpx;
				height: 56rpx;
				background-color: #00dcb6;
				margin-right: 30rpx;
			}
		}
		.bd {
			font-size: 30rpx;
			margin-top: 42rpx;
			li {
				margin-bottom: 16rpx;
				margin-left: 40rpx;
			}
		}
	}
}

.parttime-detail {
	/*  要求 */
	.require {
		margin-left: 40rpx;
		.require-item {
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;

			.rg {
				margin-left: 30rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				text {
					font-size: 30rpx;
				}
			}
		}
	}
}
/* 底部固定 */
.bottom {
	width: 100%;
	position: fixed;
	z-index: 99;
	bottom: 0;
	left: 0;
	background-color: white;
	display: flex;
	align-items: center;
	font-size: 28rpx;
	box-sizing: border-box;
	padding: 10rpx 72rpx 10rpx 30rpx;
	.lf {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.rg {
		flex: 50%;
		margin-left: 30rpx;
		button {
			height: 80rpx;
			line-height: 80rpx;
			background-color: #00dcb6;
			border: 0;
			font-size: 30rpx;
		}
	}
}
</style>
